<template>
  <div>
    <div style="width: 100%">
      <a-tabs
        v-if="productList.length !== 0"
        :default-active-key="defaultActiveKey"
        :tab-position="mode"
        :style="{ height: '500px', width: '100%' }"
        @prevClick="callback"
        @nextClick="callback"
        @tabClick="tabClick($event)"
      >
        <!-- <a-tab-pane v-for="i in 30" :key="i" :tab="`Tab-${i}`"> Content of tab {{ i }} </a-tab-pane> -->
        <a-tab-pane v-for="(product,index) in productList" :key="product.id" :tab="product.productName">
          <div>
            <a-form-model
              :model="model"
              :rules="validatorRules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              slot="detail"
              v-if="status"
              ref="form"
            >
              <a-row>
                <a-col :span="24">
                  <a-form-model-item label="产品名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productName">
                    <a-input
                      v-model="model.productName"
                      placeholder="请输入产品名称"
                      style="margin-left: 20px"
                      :disabled="true"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="品种" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="variety">
                    <a-input
                      v-model="model.variety"
                      placeholder="请输入品种"
                      style="margin-left: 20px"
                      :disabled="true"
                    >
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item label="规模" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="scale">
                    <a-input v-model="model.scale" placeholder="请输入规模" style="margin-left: 20px"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item
                    label="预计生产量"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="anticipateVolumeOfProduction"
                  >
                    <a-input
                      v-model="model.anticipateVolumeOfProduction"
                      placeholder="请输入预计生产量"
                      style="margin-left: 20px"
                    ></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="24">
                  <a-form-model-item
                    label="加工储藏物流情况"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    prop="logisticsSituation"
                  >
                    <a-input
                      v-model="model.logisticsSituation"
                      placeholder="请输入加工储藏物流情况"
                      style="margin-left: 20px"
                    >
                    </a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>

              <a-form-model-item>
                <a-button style="margin-left: 50%" type="primary" @click="add">保存备案</a-button>
                <a-button style="margin-left: 20px" type="primary" @click="sumbit(index)">提交备案</a-button>
              </a-form-model-item>
            </a-form-model>
            <div v-if="!status">已完成备案</div>
          </div>
        </a-tab-pane>
      </a-tabs>
      <div class="no-data" v-if="productList.length == 0"><a-icon type="frown-o" />暂无数据</div>
    </div>
  </div>
</template>
<script>
import { size } from 'lodash'
import { getAction, postAction } from '../../api/manage'
export default {
  data() {
    return {
      status: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
      validatorRules: {
        scale: [{ required: true, message: '请输入规模!' }],
        anticipateVolumeOfProduction: [{ required: true, message: '请输入预计生产量!' }],
        logisticsSituation: [{ required: true, message: '请输入加工储藏物流情况!' }],
      },
      mode: 'left',
      defaultActiveKey: '',
      //访问url地址统一管理
      url: {
        productListUrl: '/modules/zzzsProductRecording/listInfo',
        prdocutInfoUrl: '/modules/zzzsProductRecording/queryById',
        prdocutAddoUrl: '/modules/zzzsRecordingOfProductionCapacity/add',
        submitRecordUrl: '/modules/zzzsRecordingOfProductionCapacity/submitRecord',
        prdocutStatusUrl: '/modules/zzzsRecordingOfProductionCapacity/getRecordStatus',
      },
      productList: [],
    }
  },
  created() {
    this.getProductList()
  },
  methods: {
    //提交备案
    sumbit(index) {
      console.log(this.$refs.form)
      this.$refs.form[index].validate((valid) => {
        if (valid) {
          postAction(this.url.submitRecordUrl, this.model).then((res) => {
            console.log(this.model)
            this.getStatus(this.model.productId)
          })
        }
      })
    },
    callback(val) {
      console.log(val)
    },
    tabClick(event) {
      this.getStatus(event)
    },

    //获取product列表
    getProductList() {
      getAction(this.url.productListUrl).then((res) => {
        this.productList = res.result
        this.defaultActiveKey = this.productList[0].id
        console.log(this.productList[0].id)

        this.getStatus(this.productList[0].id)
      })
    },
    //获取prodcut信息
    getProductInfo(id = this.defaultActiveKey) {
      console.log('1111111', this.defaultActiveKey)
      getAction(this.url.prdocutInfoUrl, { id: id }).then((res) => {
        let { ...model } = res.result

        this.model = model
        this.model.productId = res.result.id
        this.id = ''
      })
    },
    getStatus(productId) {
      getAction(this.url.prdocutStatusUrl + `/${productId}`).then((res) => {
        console.log(res)
        this.status = res.result.status
        if (res.result.result) {
          this.model = res.result.result
        } else {
          this.getProductInfo(productId)
        }
      })
    },
    /**
     * 保存方法
     */
    add() {
      postAction(this.url.prdocutAddoUrl, this.model).then((res) => {
        if (res.success) {
          this.$message.success('保存备案信息成功')
        } else {
          this.$message.error('保存备案信息失败')
        }
      })
    },
  },
}
</script>
